{"componentChunkName":"component---src-pages-index-js","path":"/","result":{"data":{"site":{"siteMetadata":{"title":"Tory","configs":{"countOfInitialPost":10}}},"allMarkdownRemark":{"edges":[{"node":{"excerpt":"module Javascript에 모듈 시스템은 참 다양하다.\nnode.js 환경에서 사용가능한 모듈 시트템과 브라우저에서 사용가능한 모듈시스템이\n구분되며, 이에 따라 헷갈리기 쉬운 모듈 개념을 정리하는 시간을 가져보려고 한다. 1. node 환경의 모듈 시스템 1.1. commonJS ecmascrip의 표준 모듈은 아니지만 node.js 환경에서 채택…","fields":{"slug":"/javascript/module/"},"frontmatter":{"date":"September 13, 2021","title":"module","category":"javascript","draft":false}}},{"node":{"excerpt":"web API가 제공하는 여러가지 width 값에 대해서 이번에 반응형으로 slick(carousel)을 구현하며 겪은 문제가 있다.\n브라우저의 크기가 변경되면 slick이 한 화면에 보여주는 슬라이드의 수가 유동적으로 변하게 되는데,\nslick은 마지막 페이지에 도달하면 다음 페이지로 이동하지 못하게 막아야하므로\n다음 처럼 총 6개의 슬라이드가 있다고 …","fields":{"slug":"/javascript/width(web-api)/"},"frontmatter":{"date":"September 13, 2021","title":"width(web api)","category":"javascript","draft":false}}},{"node":{"excerpt":"vertical-align 오늘을 css prop 중 vertical-align에 대해 심플하게 알아보자. vertical-aline은 mdn에서 display가 inline, inline-block, table-cell인 경우에 세로 방향의 line 정렬을 위해 사용할 수 있다고 소개한다. (즉, block level elements는 사용할 수 없음!…","fields":{"slug":"/css/vertical-aline/"},"frontmatter":{"date":"September 03, 2021","title":"vertical-align","category":"css","draft":false}}},{"node":{"excerpt":"1. Before Jumpo into React Router ROUTER에 대해 학습하기 전 SSR과 CSR에 대해 간략하게 알고 넘어가자!\nSSR과 CSR은 페이지와 관련이 깊다. 페이지의 구조를 담당하는 HTML 파일을 어느 위치에서 생성할 것인지에 따라 SSR과 CSR로 나뉘게 된다. 1.1 SSR SSR은 사용자가 서버에게 페이지 리소스를 요청하면…","fields":{"slug":"/react/router/"},"frontmatter":{"date":"September 02, 2021","title":"router","category":"react","draft":false}}},{"node":{"excerpt":"Jump into Redux with typescript 리덕스를 typescript로 작성해보자!\n모든 내용은 redux 홈페이지를 참고했다. 매우 친절하게 설명되어 있으니 읽어보는 것을 왕왕 추천함! 📒 What we’ll learn? typescript로 Redux를 작성하는 표준 패턴! Redux 로직에서 올바르게 타입을 지정하는 방법 🧠 PRER…","fields":{"slug":"/typescript/typescript-redux/"},"frontmatter":{"date":"August 29, 2021","title":"typescript-redux","category":"typescript","draft":false}}},{"node":{"excerpt":"TypeScript TypeScript에 대해 알아보자! TypeScript는 공식 페이지에서 javascript의 superset이라고 소개한다. 공식문서에 따르면 TypeScript 2.1 부터 —target ESNext를 지원하니, 웬만한 js 문법은 전부 사용할 수 있고 컴파일을 통해 타입체크도 할 수 있으니 superset이라고 부를 수 있겠다.…","fields":{"slug":"/typescript/typescript-react/"},"frontmatter":{"date":"August 24, 2021","title":"typescript-react","category":"typescript","draft":false}}},{"node":{"excerpt":"Before Jump in to GraphQL!! rest를 잘 사용하다가 왜 GraphQL 이라는 새로운 방식의 데이터 요청 방법이\n개발되었을까? rest는 endpoint를 데이터의 자원의 주소와 맵핑하는 매우 간편한 방식을 사용한다. 하지만 endpoint를 통해 요받은 데이터는 항상 고정된 리소스 형태를 응답받기 때문에 때로는 불필요한 리소스도 포…","fields":{"slug":"/graphQL/basic/"},"frontmatter":{"date":"August 23, 2021","title":"basic","category":"graphQL","draft":false}}},{"node":{"excerpt":"문제 학생들이 각자의 과제에 대해 상호평가를 합니다. 각 학생이 자신을 포함하여 평가한 점수가 배열로 주어집니다. 이 때 각 학생이 받은 점수의 평균을 구해 학점을 반환하는 로직을 작성해야 합니다. 최종 반환하는 형식은 ‘FBC’ 와 같이 0번 학생부터 순서대로 학점을 구해 문자열로 반환합니다. 단, 학생이 자신을 평가한 점수가 유일한 최고점수 혹은 최저…","fields":{"slug":"/Problem Solving/학점구하기/"},"frontmatter":{"date":"August 11, 2021","title":"학점구하기","category":"problem solving","draft":false}}},{"node":{"excerpt":"집중력 향상 주어진 일을 시간내에 해내야할 때 집중력이 필요한 경우가 있다. 기본적으로 사람의 성향을 바꾸는 것이 쉽지는 않기 때문에, 갑자기 집중을 잘하는 사람이 될 수는 없지만, 즉각적으로 집중력을 향상시킬 수 있는 몇 가지 방법 혹은 도구를 동원해서 한번 집중력을 끌어올려 보자. 뽀모도로 방식: 일정한 시간을 정하고 그 시간에는 반드시 그 일만하자.…","fields":{"slug":"/etc/집중력-향상/"},"frontmatter":{"date":"May 09, 2021","title":"집중력 향상","category":"etc","draft":false}}},{"node":{"excerpt":"플래너 작성하기 시간관리를 더욱 철저하게하기 위해 플래너를 작성할 때 규칙들을 정해보자. 나와의 약속 자기전에 다음날 할 일을 생각해보고 최초 3개 최대 6개 + a 까지 작성해보기.(TO DO LIST) TO DO LIST는 중요도 순으로 작성하고 항상 중요도 순으로 실천하기.(Ivy) 하루를 살며 한 시간 간격으로 내가 했던 일을 기록하기. 하루를 살…","fields":{"slug":"/etc/planner/"},"frontmatter":{"date":"May 09, 2021","title":"planner","category":"etc","draft":false}}},{"node":{"excerpt":"위상 정렬 정렬이라고 해서 마치 리스트의 정렬 알고리즘 처럼 값의 크기에 따라 각 값들을 정렬하는 것으로 착각할 수 있다. 하지만 이 개념과 혼동하지 않고 완전히 다른 시각으로 바라보아야 한다.\n위상 정렬이란 사이클이 없는 방향 그래프에서 모든 노드를 방향성에 거스르지 않고 순서대로 나열하는 방법이다. 즉 모든 노드를 순회하되 방향성에 맞게 순회하는 방법…","fields":{"slug":"/algorithm/위상정렬/"},"frontmatter":{"date":"May 09, 2021","title":"위상정렬","category":"algorithm","draft":false}}},{"node":{"excerpt":"4월 회고 개요 패스트캠퍼스의  프로젝트를 시작한지 벌써 1달하고 보름이 지났다. 그 동안 나에게 있었던 변화를 관찰해보고 마음을 정리하고자 2021년 4월 회고를 작성해 본다. 패스트캠퍼스에서 있었던 일 자료구조와 알고리즘 패스트캠퍼스에 들어와서 처음으로 배운 수업은 자료구조와 알고리즘이다. 내게는 이해하기 힘든 과목이어서 하루하루 복습하고, 예습하고,…","fields":{"slug":"/회고/4월-회고/"},"frontmatter":{"date":"May 01, 2021","title":"4월 회고","category":"회고","draft":false}}},{"node":{"excerpt":"scss scss는 sass의 3번 버전으로 css 전처리기입니다. css에 왜 전처리기가 필요할까요? css를 접해봤다면 반복되는 작업을 수행할 수 없기 때문에 코드의 길이가 상당히 길어지게 됩니다. 이렇게 긴 css 코드는 구조를 파악하기 힘들어지며 이 것은 생산성과도 직결됩니다. 그 외에도 여러가지 이유가 있지만 scss를 사용하면 선택자를 재사용할…","fields":{"slug":"/css/scss/"},"frontmatter":{"date":"May 01, 2021","title":"scss","category":"css","draft":false}}},{"node":{"excerpt":"media-query 미디어 쿼리는 미디어 유형과, 미디어의 특성에 따라 스타일을 지정하고 싶을 때 사용한다. 1. 문법 참고1\n조건에는 미디어의 유형 또는 특성을 입력한다. 참고2\n조건을 충족하면 {} 내에 작성한 css 문법이 적용된다. 1.1 논리 연산자 , , , 와 같은 논리 연산자를 사용해서 쿼리를 조합하면 복잡한 조건식을 만들 수 있다. a …","fields":{"slug":"/css/media-query/"},"frontmatter":{"date":"April 27, 2021","title":"media query","category":"css","draft":false}}},{"node":{"excerpt":"attr attr 함수는 입력받은 html 속성의 값을 반환한다. 실습 javascript vs css 장점 단점 활용방안","fields":{"slug":"/css/attr/"},"frontmatter":{"date":"April 27, 2021","title":"attr","category":"css","draft":false}}},{"node":{"excerpt":"counter counter 함수를 활용하면 javascript를 사용하지 않고 선택된 요소가 몇 번째 요소인지 파악할 수 있다. 실습 javascript vs css 장점 단점 활용방안","fields":{"slug":"/css/counter/"},"frontmatter":{"date":"April 27, 2021","title":"counter","category":"css","draft":false}}},{"node":{"excerpt":"","fields":{"slug":"/html/noreferrer&noopener/"},"frontmatter":{"date":"April 24, 2021","title":"noreferrer&noopener","category":"html","draft":false}}},{"node":{"excerpt":"HTML5는 HTML 4.01과 XHTML 1.0 문법을 모두 반영합니다. 이와 더불어 기존에 없던 콘텐츠 모델이라는 개념이 도입되었는데, 오늘은 콘텐츠 모델에 대해서 알아보려고 합니다. 1. Content models 모든 요소는 콘텐츠 모델이라는 개념을 가지고 있습니다. 그렇다면 콘텐츠 모델이란 무엇일까요? 각 요소는 고유의 의미를 가지고 있습니다. …","fields":{"slug":"/html/content-models/"},"frontmatter":{"date":"April 24, 2021","title":"content models","category":"html","draft":false}}},{"node":{"excerpt":"왜 h1 태그를 로고에 사용하는가? 페이지의 h1태그를 로고와 함께 사용하는 케이스를 자주 접할 수 있습니다. 그러다 문득 왜 h1 태그를 관례처럼 로고와 함께 사용하고 있는지 의문이 들었습니다. 그래서 오늘은 마크업 구조에서 왜 h1 태그를 로고와 함께 사용하고 있는지 알아보려고 합니다. 내 생각 h1 태그는 페이지를 대표하는 가장 큰 제목입니다. 기업…","fields":{"slug":"/html/로고와-h1/"},"frontmatter":{"date":"April 20, 2021","title":"로고와 h1","category":"html","draft":false}}},{"node":{"excerpt":"HTML을 공부하다가 웹서버와 웹브라우저가 만들어진 배경이 궁금했다. 그래서 이번 포스트는 웹의 역사를 알아가는 시간이 되겠다. 인터넷의 기원 회선 교환으로 통신하는 두 기기는 데이터를 주고받기 위해서 회선을 독점해서 사용해야 했다. 이는 다수의 기기를 연결해서 여러 기기가 동시에 데이터를 주고 받을 경우 이미 독점된 상태의 회선들을 사용하지 못한다는 단…","fields":{"slug":"/network/웹의-역사/"},"frontmatter":{"date":"April 20, 2021","title":"웹의 역사","category":"network","draft":false}}},{"node":{"excerpt":"","fields":{"slug":"/html/dtd/"},"frontmatter":{"date":"April 20, 2021","title":"DTD","category":"html","draft":false}}},{"node":{"excerpt":"","fields":{"slug":"/html/wai-arai/"},"frontmatter":{"date":"April 20, 2021","title":"wai-arai","category":"html","draft":false}}},{"node":{"excerpt":"Diameter of Tree 문제 가중치를 가지는 트리에서 임의의 두 노드를 선택합니다. 이 때 두 노드를 연결하는 가중치들의 합이 최대가 되는 가중치를 반환하세요.(지름 반환 문제) 접근방법 임의의 두 리프 노드를 선택한 집합이 최장 가중치의 후보가 된다. 루트 노드에서 부터 1 depth씩 내려가며 가장 긴 간선을 택해 리프 노드를 찾아가는 Gree…","fields":{"slug":"/Problem Solving/트리의-지름/"},"frontmatter":{"date":"April 15, 2021","title":"트리의 지름","category":"problem solving","draft":false}}},{"node":{"excerpt":"추상자료형이란? 값이나 연산의 집합으로 정의되는 자료형의 수학적 모델. 특징 ADT만 알고있다면 하나의 ADT로 부터 구현된 여러개의 자료구조들을 ADT에 정의된 방법으로 동일하게 사용할 수 있다. ex) ADT:List, DS: ArrayList, LinkedList) 또한 동일한 결과를 보여주는 두 자료구조라도 내부 구현방식은 다를 수 있기 때문에, …","fields":{"slug":"/Data Structure/abstract-data-type/"},"frontmatter":{"date":"April 12, 2021","title":"Abstract Data Type","category":"data structure","draft":false}}},{"node":{"excerpt":"세상을 바꾸는 시간, 15분 이명수 선생님의 강연을 듣고… 이 글은 건강한 마음으로 공부하기 위해  라는 목적을 가지고 작성했습니다. 패스트캠퍼스 네카라쿠배 프론트엔드 스쿨 1기 - 3주차 많이 어렵고 이해하기 힘들었던 자료구조&알고리즘 수업이 어제로 끝났다. 라고 생각할 정도로 정말 많은 양을 공부했다. 내가 이 수업을 놓치지 않고 따라갈수 있던 이유는…","fields":{"slug":"/diary/느리게-걷기-대회/"},"frontmatter":{"date":"April 10, 2021","title":"느리게 걷기 대회","category":"diary","draft":false}}},{"node":{"excerpt":"동적계획법이란 두 가지 조건을 포함해서 복잡한 문제를 보다 단순한 부분 문제로 나누어 해결하는 방법입니다. 부분문제들의 최적해가 전체의 최적해를 이룹니다. 동일한 부분문제들이 여러번 발생합니다. 조건이 충족되지 않으면 분할&정복 문제라고 합니다. 동적계획법의 핵심 중복되는 연산을 미리 캐싱해 두고, 중복 연산이 발생할 때 마다 참조하여 연산을 줄입니다. …","fields":{"slug":"/algorithm/dynamic-programming/"},"frontmatter":{"date":"April 07, 2021","title":"Dynamic Programming","category":"algorithm","draft":false}}},{"node":{"excerpt":"문제 도둑이 어느 마을을 털 계획을 하고 있습니다. 이 마을의 모든 집들은 아래 그림과 같이 동그랗게 배치되어 있습니다. 각 집들은 서로 인접한 집들과 방범장치가 연결되어 있기 때문에 인접한 두 집을 털면 경보가 울립니다. 각 집에 있는 돈이 담긴 배열 money가 주어질 때, 도둑이 훔칠 수 있는 돈의 최댓값을 return 하도록 solution 함수를…","fields":{"slug":"/Problem Solving/burglary/"},"frontmatter":{"date":"April 07, 2021","title":"burglary","category":"Problem Solving","draft":false}}},{"node":{"excerpt":"Today I learned 오늘은 max-width 속성에 대해 알아보았다.\nmax-width 속성은 inline, block 요소와 무관하게\n모든 요소에 대해서 width 값의 maximum을 설정한다. inline요소와 block요소에 따른 차이점은\nblock 요소는 기본적으로 가로를 모두 채우고있기 때문에 width에 여백이 생긴 경우라면 남은 여…","fields":{"slug":"/html/til210406/"},"frontmatter":{"date":"April 06, 2021","title":"TIL210406","category":"html","draft":false}}},{"node":{"excerpt":"Jump into BST 이진트리 구조에 특수한 규칙을 적용한 트리입니다. 부모 노드를 기준으로 왼쪽 자식 노드에는 작은 값의 노드가 삽입되고, 오른쪽 자식 노드에는 큰 값이 삽입 됩니다. Basic aspects of BST: 좌우의 균형이 맞으면, 탐색, 삽입, 제거의 시간복잡도가 log(n)으로 상당히 빠른 편에 속한다. 삽입되는 순서에 따라 트리가…","fields":{"slug":"/Data Structure/binary-search-tree/"},"frontmatter":{"date":"April 05, 2021","title":"Binary Search Tree","category":"Data Structure","draft":false}}},{"node":{"excerpt":"Jump to Merge Sort About Merge Sort 정렬된 두 리스트의 왼쪽 인덱스부터 차례대로 대소관계를 비교합니다. 그리고 비교된 값 중 작은 값 부터 새로운 리스트에 채워나가면 O(n)의 시간복잡도로 두 리스트를 하나의 리스트에 정렬시킬 수 있습니다. 이 방법을 활용해서 정렬되지 않은 하나의 리스트를 길이가 2 혹은 1인 여러 개의 부분…","fields":{"slug":"/algorithm/merge-sort/"},"frontmatter":{"date":"April 05, 2021","title":"Merge Sort","category":"algorithm","draft":false}}},{"node":{"excerpt":"Jump into Binary Search 정렬된 자료에서 탐색하는 알고리즘입니다.\n나열된 자료들 중에서 중앙에 있는 값을 기준으로 찾고자 하는 값이 큰 경우 혹은 작은 경우에 따라 찾아야 하는 자료의 범위가 반씩 줄어들기 때문에 시간 복잡도는 O(logN)이 됩니다. 1. 구현 recursion iteration","fields":{"slug":"/algorithm/binary-search/"},"frontmatter":{"date":"April 04, 2021","title":"Binary Search","category":"algorithm","draft":false}}},{"node":{"excerpt":"Jump to Complexity 1. Algorithm 알고리즘이란 문제를 해결하기 위한 여러 동작들의 모임입니다. 서로 다른 두 개의 알고리즘이 같은 결과를 출력할지라도 소비되는 컴퓨터의 메모리와, 출력까지 소요되는 시간은 달라지게 됩니다. 즉, 메모리와 시간이 알고리즘을 측정할 수 있는 기준이 됩니다. 2. Complexity 알고리즘이 어떤 문제를…","fields":{"slug":"/algorithm/time-complexity/"},"frontmatter":{"date":"April 04, 2021","title":"Time Complexity","category":"algorithm","draft":false}}},{"node":{"excerpt":"Jump to Insertion Sort 1. About Insertion Sort 삽입 정렬은 가장 기본적인 정렬 알고리즘 중에 하나입니다.\n기본적으로 정렬되지 않은 부분과 정렬된 부분으로 나눌 수 있습니다. 우선 정렬되지 않는 부분을 순차적으로 순회합니다. 이 때 각 데이터가 정렬된 부분의 어느 위치에 삽입되어야 정렬 상태를 유지하는지 찾아내고 삽입합…","fields":{"slug":"/algorithm/insertion-sort/"},"frontmatter":{"date":"April 04, 2021","title":"Insertion Sort","category":"algorithm","draft":false}}},{"node":{"excerpt":"Jump to Quick Sort 🚴 1. About Quick Sort 퀵 정렬은 분할1과 정복2을(Divide and conquer) 적극적으로 활용한 정렬 알고리즘이다. 퀵 정렬은 PIVOT이라는 기준값이 존재한다. 이 PIVOT을 기준으로 작은 값의 범위, 큰 값의 범위로 나누는 분할&정복 과정을 반복하는 알고리즘이다. 2. Code case1: …","fields":{"slug":"/algorithm/quick-sort/"},"frontmatter":{"date":"April 03, 2021","title":"Quick Sort","category":"algorithm","draft":false}}},{"node":{"excerpt":"Getting Started 😎 1. Create a Gatsby site. If you are not using , following Gatsby Getting Started 2. Start developing. 3. Add your content You can write… contents to blog in  directory. resume  dire…","fields":{"slug":"/development/quick_start/"},"frontmatter":{"date":"July 05, 2020","title":"Quick Start","category":"development","draft":false}}}]}},"pageContext":{}},"staticQueryHashes":["3128451518","521680639"]}